<script setup lang="ts">
import { Api, useConfirm, Format } from '@idmy/core'
import { Card, Cond, Form, FormItem, CondItem, View, Space, Table, TableColumn, Button, Switch, Enum, DateRangePicker, Tag } from '@idmy/ui'
import { getPreviewById, pageInvoice, printBefore, printFail, printSuccess, retrieve } from './services'
import { loadAllTemplates } from '@/views/PrintTemplate/services'
import { lodapPrint } from '@/components/Lodop'
import UpdatePrintStatus from '@/views/Invoice/UpdatePrintStatus.vue'
import Line from '@/views/Invoice/Line.vue'
import Item from '@/views/Invoice/Item.vue'

const apiRef = ref()
const onLoad = () => apiRef.value.onLoad()

const printing = ref(false)
const onPrint = async (id, isPreview) => {
  try {
    printing.value = true
    const { templateId, params } = await printBefore(id)
    await lodapPrint(templateId, params, { mode: isPreview ? '' : 'print' })
    await printSuccess(id)
  } catch {
    await printFail(id)
  } finally {
    await onLoad()
    printing.value = false
  }
}

const onRetrieve = useConfirm(retrieve, '收票作废', onLoad)

const onUpdatePrintStatus = ({ id }) => {
  Modal.open({
    component: UpdatePrintStatus,
    title: '修改打印状态',
    props: {
      id,
    },
    onClose: isOk => isOk && onLoad(),
  })
}
const onLine = ({ id }) => {
  Modal.open({
    component: Line,
    title: '发票明细',
    width: 4,
    props: {
      mainId: id,
    },
  })
}

const onPreview = async ({ id }) => {
  const { url } = await getPreviewById(id)
  Modal.open({
    component: url,
    width: 4,
    title: '查看电子发票',
  })
}

onMounted(async () => {
  await loadAllTemplates()
})
</script>

<template>
  <Card>
    <Api ref="apiRef" :input="{ sorts: ['createdAt', 'desc'] }" :load="pageInvoice">
      <Space direction="vertical">
        <Cond :noStyle="true">
          <!--          <View title="基本信息">
            <Cond :col="3" :grid="true">
              <CondItem title="关键字关" field="keyword" required placeholder="姓名/发票代码/发票号码" />
              <CondItem title="关键字关关键字关关键字关" field="settleId" tip="cashId" component="Input" />
              <CondItem title="身份证" field="cardNo" />
              <CondItem title="流水号" field="no" required />
            </Cond>
          </View>
          <View title="基本信息">
            <Cond :col="2" :grid="true">
              <CondItem title="关键字关" field="keyword" required placeholder="姓名/发票代码/发票号码" />
              <CondItem title="关键字关关键字关关键字关" field="settleId" tip="cashId" component="Input" />
              <CondItem title="身份证" field="cardNo" />
              <CondItem title="流水号" field="no" required />
            </Cond>
          </View>
          <Cond :col="3" :grid="true">
            <CondItem title="关键字关" field="keyword" required placeholder="姓名/发票代码/发票号码" />
            <CondItem title="关键字关关键字关关键字关" field="settleId" tip="cashId" component="Input" />
            <CondItem title="身份证" field="cardNo" />
            <CondItem title="流水号" field="no" required />
          </Cond>
          <View title="查询条件" line>
            <Cond>
              <CondItem title="关键字关键字关键字关键字关键字" field="keyword" required placeholder="姓名/发票代码/发票号码" :noStyle="true" />
              <CondItem title="关键字关键字关键字关键字关键字" field="settleId" tip="cashId" required component="Input" />
              <CondItem title="身份证" field="cardNo" />
              <CondItem title="流水号" field="no" required />
            </Cond>
          </View>-->
          <CondItem field="isElectronic" title="电子票？" component="Switch" />
          <CondItem title="业务类型" field="bizType" component="Enum" clazz="BizType" />
          <CondItem title="其他业务类型" field="otherBizTypeCode" component="Enum" clazz="OtherBizType" value-key="value" />
          <CondItem title="打印状态" field="printStatus" clazz="PrintStatus" />
          <CondItem title="创建时间" field="createdAts" component="DateRangePicker" />
        </Cond>
        <Table>
          <TableColumn field="id" title="ID" :width="100" fixed="left">
            <template #cell="{ row }">
              <Button is-text type="primary" size="mini" @click="onLine(row)" :text="row.id" />
            </template>
          </TableColumn>
          <TableColumn field="settleId" title="结算ID" tip="cashId" :width="150" sortable tooltip ellipsis fixed="left" />
          <TableColumn field="isScarlet" title="已冲红" :width="80">
            <template #cell="{ row }">
              <span v-if="row.isScarlet" class="error">是</span>
              <template v-else>否</template>
            </template>
          </TableColumn>
          <TableColumn field="ticketCode" title="发票代码" :width="100" />
          <TableColumn field="ticketNo" title="发票号码" :width="120" />
          <TableColumn field="checkCode" title="校验码" :width="100" />
          <TableColumn field="ticketAt" title="开票日期" :width="120" type="Date" sortable />
          <TableColumn field="outpatient.no" title="门诊号" :width="140" tooltip ellipsis />
          <TableColumn field="bizNo" title="业务号" :width="150" tooltip ellipsis />
          <TableColumn field="bizType" title="业务类型" :width="120" format="Enum" params="BizType" />
          <TableColumn field="otherBizTypeCode" title="其他业务类型代码" :width="180" format="Enum" params="OtherBizType" />
          <TableColumn field="gender" title="性别" :width="80" format="Enum" params="Gender" />
          <TableColumn field="name" title="姓名" :width="100" />
          <TableColumn field="age" title="年龄" :width="80" />
          <TableColumn field="amt" title="金额" :width="100" align="right" sortable />
          <TableColumn field="cardNo" title="身份证" :width="150" tooltip ellipsis />
          <TableColumn field="mobile" title="手机号" :width="150" />
          <TableColumn field="email" title="邮箱" :width="180" />
          <TableColumn field="openId" title="开放ID" :width="150" tooltip ellipsis />
          <TableColumn field="wechatOrderNo" title="微信订单号" :width="150" tooltip ellipsis />
          <TableColumn field="creator" title="开票人" :width="120" />
          <TableColumn field="no" title="流水号" :width="150" tooltip ellipsis />
          <TableColumn field="createdAt" title="创建日期" :width="170" type="Datetime" sortable />
          <TableColumn field="updatedAt" title="更新日期" :width="170" type="Datetime" sortable />
          <TableColumn field="printStatus" title="打印状态" :width="100" fixed="right">
            <template #cell="{ row }">
              <Format :value="row.printStatus" type="Enum" params="PrintStatus" :component="Tag" />
            </template>
          </TableColumn>
          <TableColumn field="locked" title="锁定" :width="80" type="Boolean" fixed="right" />
          <TableColumn field="op" title="操作" :width="110" align="center" fixed="right">
            <template #cell="{ row }">
              <Button v-if="row.checkCode" type="primary" size="mini" @click="onPreview(row)" text="查看发票" />
              <Space size="mini" justify="center" v-else>
                <template v-if="row.printStatus === 'NONE'">
                  <Button type="primary" size="mini" :disabled="printing || row.locked" @click="onPrint(row.id, true)" text="预览" />
                  <Button type="primary" size="mini" :disabled="printing || row.locked" @click="onPrint(row.id, false)" text="直打" v-if="false" />
                </template>
                <template v-if="row.printStatus === 'PRINTED'">
                  <Button type="primary" size="mini" :disabled="printing || row.locked" @click="onRetrieve(row.id)" text="收票作废" />
                </template>
                <template v-if="row.printStatus === 'PRINTING'">
                  <Button type="primary" size="mini" :disabled="printing || row.locked" @click="onUpdatePrintStatus(row)" text="修改状态" />
                </template>
              </Space>
            </template>
          </TableColumn>
        </Table>
      </Space>
      <Item />
    </Api>
  </Card>
</template>
